<template>
    <!-- 注册页 -->
    <el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" class="register">
        <div class="form-item-container">
            <el-form-item prop="username">
                <el-input v-model="username" clearable placeholder="请输入用户名(注册后不可更改)" :prefix-icon="User" type="text"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input v-model="password" show-password clearable placeholder="请输入密码" :prefix-icon="Lock" type="password"
                    autocomplete="off" />
            </el-form-item>
            <el-form-item prop="repeatPassword">
                <el-input v-model="repeatPassword" show-password clearable placeholder="请再次输入密码" :prefix-icon="Lock"
                    type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item prop="email">
                <el-input v-model="email" clearable placeholder="请输入邮箱(用于找回密码)" :prefix-icon="Message" type="text"
                    autocomplete="off" />
            </el-form-item>
            <div class="register-btn">
                <el-button type="success" @click="changePanel()">返回登录</el-button>
                <el-button type="primary" @click="register(ruleFormRef)">注册用户</el-button>
            </div>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import axios from 'axios'
import { User, Lock, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { usernameValidate, passwordValidate, emailValidate } from '@/Util'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: '',
    password: '',
    repeatPassword: '',
    email: ''
})
const { username, password, repeatPassword, email } = toRefs(ruleForm)
const { changePanel } = defineProps<{
    changePanel: Function
}>()
const validatePassword = (rule: any, value: any, callback: any) => {
    if (value && value !== password.value) {
        return callback('两次输入的密码不一致')
    }
    return true
}
const rules = reactive<FormRules>({
    username: usernameValidate,
    password: passwordValidate,
    repeatPassword: [{ validator: validatePassword, trigger: 'blur' }],
    email: emailValidate as any,
})
const register = (formEl: FormInstance | undefined) => {
    formEl?.validate((valid: boolean) => {
        if (valid) {
            axios.post('/user/register', {
                username: username.value,
                password: password.value,
                email: email.value
            }).then(({ data }) => {
                ElMessage({
                    message: data.msg,
                    type: data.code == '0000' ? 'success' : 'error',
                })
                changePanel()
                formEl.resetFields()
            }, (err) => {
                throw err
            })
        } else {
            ElMessage({
                message: '验证失败!',
                type: 'error',
            })
            return false
        }

    })

}
watch(ruleForm, () => { // 输入内容清除表单状态
    ruleFormRef.value?.clearValidate()
}, {
    deep: true
})
</script>


<style scoped lang="less">
.register {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -200px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    align-items: center;
    backface-visibility: hidden;

    .form-item-container {
        height: inherit;
        width: 70%;
        padding-top: 30px;

        .register-btn {
            display: flex;
            justify-content: space-between;
        }
    }

}
</style>